<template>
  <div class="docker">
    <div
      v-for="(item, index) in dockerList"
      :key="item.icon"
      class="docker_item"
      :class="{
        docker_item: true,
      }"
    >
      <router-link
        :to="item.to"
        :class="index === currentIndex ? 'docker_item--active' : ''"
      >
        <div class="iconfont" v-html="item.icon"></div>
        <div class="docker_title">{{ item.text }}</div>
      </router-link>
    </div>
  </div>
</template>

<script>
export default {
  name: "Docker",
  props: ["currentIndex"],
  setup() {
    const dockerList = [
      { icon: "&#xe603", text: "首页", to: { name: "Home" } },
      { icon: "&#xe6af", text: "购物车", to: { name: "CartList" } },
      { icon: "&#xe63e", text: "订单", to: { name: "OrderList" } },
      { icon: "&#xe7d5", text: "我的", to: { name: "Address" } },
    ];
    return { dockerList };
  },
};
</script>

<style lang="scss" scoped>
@import "../style/viriables.scss";
.wrapper {
  background: red;
}
.docker {
  display: flex;
  box-sizing: border-box;
  position: absolute;
  padding: 0 0.18rem;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0.49rem;
  border-top: 0.01rem solid $content-bgColor;
  color: $content-fontcolor;
  &_item {
    flex: 1;
    text-align: center;
    a {
      color: $content-fontcolor;
      text-decoration: none;
    }
    .iconfont {
      margin: 0.07rem 0 0.02rem 0;
      font-size: 0.18rem;
    }
  }

  &_title {
    font-size: 0.2rem;
    transform: scale(0.5, 0.5); //宽度和高度各自缩小到原来的50%
    transform-origin: center top; //元素在进行缩放时保持顶部和中心对齐
  }
  .docker_item--active {
    color: #1fa4fc !important;
  }
}
</style>
